<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>layui在线调试</title>
  
  <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
<script src="../../res/js/jquery-3.4.1.min.js"></script>
  <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
    
    #poe {

	width:300px;
	height:30px;
	font-weight: bold;
}

 #btnQuery {

	width:50px;
	height:30px;
	font-weight: bold;
}
  </style>
</head>
<body>

<ul>
	<li>
		<input type="text" name="pimg" id="poe" placeholder="请输入模型名称">	
		<input type="button" value="查询" id="btnQuery" />

	</li>
</ul>

<table class="layui-hide" id="demo" lay-filter="test"></table>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
 


  
<script src="../../layui/layui.js"></script>
<script>
layui.config({
  version: '1568076536616' //为了更新 js 缓存，可忽略
});
 var table2=null;
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
  var laydate = layui.laydate //日期
 
  ,layer = layui.layer //弹层
  ,table = layui.table //表格
  
  //向世界问个好
 
  
  
  //执行一个 table 实例
  table2=table.render({
    elem: '#demo'
    ,height: 560
    ,url: '../../../ModuleAction/findAll' //数据接口
    ,title: '用户表'
    ,page: true //开启分页
    ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    ,cols: [[ //表头
    	 {type: 'checkbox', fixed: 'left'}
      ,{field: 'fumodName', title: '上级模块', width:180}
      ,{field: 'modName', title: '模块名称', width: 190, sort: true, totalRow: true}
      ,{field: 'modLocaton', title: '模块url', width:220, sort: true}
      ,{field: 'modRemark', title: '备注', width:200, sort: true}
      ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
    ]]
  });
  
  //监听头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    switch(obj.event){
      case 'add':
    	 

    	  layer.open({
    	    type: 2,
    	    title: "新增",
    	    closeBtn: 1, //不显示关闭按钮
    	    shade: [0],
    	    area: ['600px', '590px'],
    	    anim: 2,
    	    content: ['type_indexa.addOrupdate.html'], //iframe的url，no代表不显示滚动条
    	    end: function(){ //此处用于演示
    	    	 table2.reload();
    	      }
    	    })
    	  
      break;
      case 'update':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else if(data.length > 1){
          layer.msg('只能同时编辑一个');
        } else {
          layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
        }
      break;
      case 'delete':
    	  if(data.length === 0){
              layer.msg('请选择一行');
            } else {
            	

    			if(confirm("确定需要删除吗?")){
    				var ids = "";
    		          $.each(data,function(index,item){
    		        	  ids+=item.modId+",";
    		        	
    		          })
    				var url = "../../../ModuleAction/deleteAll";
    				var data ={ids:ids};
    				$.post(url,data,function(obj){
    					if(obj.state==1){
    						 table2.reload();
    					}else{
    						alert("删除失败!");
    					}
    				})
    			}
            }
          break;
        
      break;
    };
  });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){
      layer.msg('查看操作');
    } else if(layEvent === 'del'){
      layer.confirm('真的删除行么', function(index){
       // obj.del(); //删除对应行（tr）的DOM结构
        
        var url="../../../ModuleAction/delete";
        var data2={modId:data.modId};
        $.post(url,data2,function(obj){
        	if(obj.state==1){
        		layer.msg("删除成功",{icon:1},function(){
        			  layer.close(index);
        			  table2.reload();
        		})
        	}else{
        		layer.msg("删除失败",{icon:2},function(){
      			 
      		})
        	}
        },"json")
      
        //向服务端发送删除指令
      });
    } else if(layEvent === 'edit'){
    	
    	layer.open({
    	    type: 2,
    	    title: "修改",
    	    closeBtn: 1, //不显示关闭按钮
    	    shade: [0],
    	    area: ['600px', '590px'],
    	    anim: 2,
    	    content: ['type_indexa.addOrupdate.html?id='+data.modId], //iframe的url，no代表不显示滚动条
    	    end: function(){ //此处用于演示
    	    	 table2.reload();
    	      }
    	    })
    	  
    }
  });
  
 
  
  //将日期直接嵌套在指定容器中
  var dateIns = laydate.render({
    elem: '#laydateDemo'
    ,position: 'static'
    ,calendar: true //是否开启公历重要节日
    ,mark: { //标记重要日子
      '0-10-14': '生日'
      ,'2018-08-28': '新版'
      ,'2018-10-08': '神秘'
    } 
    ,done: function(value, date, endDate){
      if(date.year == 2017 && date.month == 11 && date.date == 30){
        dateIns.hint('一不小心就月底了呢');
      }
    }
    ,change: function(value, date, endDate){
      layer.msg(value)
    }
  });
  
 
  
  //上传
  
 
  //底部信息
	
		$("#btnQuery").on("click",function(){
			table2.reload({
				url: '../../../ModuleAction/findAll',
			    where: {
			    	modName: $("#poe").val()
			    },
			    page: { curr: 1 }
			});
		})
	
});
</script>
</body>
</html>        
        <SCRIPT ></SCRIPT>